import { useState } from "react";
import styles from './Unit.less';
import { Popover } from 'antd';
import { getItemMarginLeft, getItemMarginTop, getItemMarginBottom } from '../utils/util';
import NumberPad from "../components/NumberPad";
import MarkPad from "../components/MarkPad";
import { motion } from 'motion/react';

type Props = {
    index: number;
    isInit: boolean;
    isStable: boolean;
    num: number;
    mark: number[];
    onNumberSelect: (index: number, number: number) => void;
    onMarkSelect: (index: number, number: number[]) => void;
    isError: boolean;
};

const baseWindow = Math.min(window.innerWidth, window.innerHeight);
const mainSize = baseWindow - 200;
export const mainPadding = 5;
export const innerPadding = 1;
const itemSize = (mainSize - mainPadding * 4 - innerPadding * 6) / 9;

export default (props: Props) => {
    const {
        index,
        isInit,
        isStable,
        num,
        mark,
        isError,
        onNumberSelect,
        onMarkSelect,
    } = props;

    const [showNumPad, setShowNumPad] = useState<boolean>(false);
    const [numPadMode, setNumPadMode] = useState<'input' | 'mark'>('input');

    return (
        <div className={styles.item} style={{
            width: itemSize,
            height: itemSize,
            marginLeft: getItemMarginLeft(index),
            marginTop: getItemMarginTop(index),
            marginBottom: getItemMarginBottom(index),
        }} onContextMenu={(event) => {
            event.preventDefault();
            setNumPadMode('mark');
            setShowNumPad(!showNumPad);
        }} onClick={(event) => {
            event.preventDefault();
            setNumPadMode('input');
            setShowNumPad(!showNumPad);
        }}>
            {isInit ? (
                <span className={styles.initNum}>?</span>
            ) : isStable ? (
                <span className={styles.stableNum}>{num}</span>
            ) : (
                <Popover
                    content={(
                        numPadMode == 'input' ?
                            <NumberPad index={index} callback={onNumberSelect}/>
                            : <MarkPad current={mark} index={index} callback={onMarkSelect}/>
                    )}
                    title={undefined}
                    trigger={["click"]}
                    open={showNumPad}
                    onOpenChange={(_open: boolean) => {
                        setShowNumPad(_open);
                    }}
                >
                    {isError ? (
                        <motion.div
                            className={styles.errorLayout}
                            initial={{
                                scale: 1,
                                opacity: 0.5,
                            }}
                            animate={{
                                scale: 1.1,
                                opacity: 1,
                            }}
                            transition={{ duration: 0.5, repeat: Infinity, repeatType: 'loop' }}
                        >
                            <span className={styles.errorNum}>{num > 0 ? num : ''}</span>
                        </motion.div>
                    ) : (
                        <div className={styles.editLayout}>
                            <span className={styles.editNum}>{num > 0 ? num : ''}</span>
                            {!!mark?.length && (
                                <div className={styles.markLayout}>
                                    {NUMS.map(i => (
                                        <div className={styles.markItem} key={`${i}`}>
                                            {mark?.includes(i) ? i : ''}
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                    )}
                </Popover>
            )}
        </div>
    );
}

const NUMS = [1, 2, 3, 4, 5, 6, 7, 8, 9];